<script setup name="TaskStudyDetail">
import { useRouter } from 'vue-router';
import { Plus, ArrowDown } from '@element-plus/icons-vue';

const router = useRouter();
const routerQuery = router.currentRoute.value.query;
</script>

<template>
  <div class="TaskStudyDetail">
    <div class="topHeader">
      <span>{{ routerQuery.name }}</span>
    </div>
    <div class="breadcrumb">
      <span @click="router.push('/superAdministrator')">任务发布</span>
      <span>/任务详情</span>
    </div>
    <div class="TaskPreviewStudy">
      <div class="layout">
        <div class="layoutHeader">
          <h1 class="title">{{ routerQuery.name }}</h1>
          <span class="time">时间：{{ routerQuery.startTime }}-{{ routerQuery.endTime }}</span>
        </div>
        <div class="layoutContent">
          <!-- 基本学业 -->
          <div class="section baseStudy">
            <div class="header">基本学业</div>
            <div class="item">
              <div class="title star">考试</div>
              <div class="itemContent">
                <div class="content">
                  <div class="circle"></div>
                  <div class="text">四级</div>
                </div>
                <div class="content">
                  <div class="circle"></div>
                  <div class="text">六级</div>
                </div>
                <div class="content">
                  <div class="circle"></div>
                  <div class="text">无</div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="title star">奖金情况</div>
              <div class="itemContent text-area">
                <span>请输入奖金情况</span>
              </div>
            </div>
            <div class="item">
              <div class="title star">政治面貌</div>
              <div class="itemContent input-field">
                <span>请选择政治面貌</span>
                <el-icon><ArrowDown /></el-icon>
              </div>
            </div>
            <div class="item">
              <div class="title star">加权绩点</div>
              <div class="itemContent input-field">
                <span>请输入加权绩点</span>
              </div>
            </div>
            <div class="item">
              <div class="title star">志愿时长</div>
              <div class="itemContent input-field">
                <span>请输入志愿时长</span>
              </div>
            </div>
          </div>

          <!-- 比赛 -->
          <div class="section competition">
            <div class="header">比赛</div>
            <div class="item">
              <div class="title star">获奖情况</div>
              <div class="itemContent text-area">
                请输入比赛名称和获奖名次情况，部分非国家级奖请写明是否未区域赛或赛区范围（如：全国大学生生物物联网设计竞赛（华北分赛区），并在下方传证书图片）
              </div>
            </div>
            <div class="item">
              <div class="title star">获奖证书</div>
              <div class="itemContent upload-area">
                <el-icon><Plus /></el-icon>
                <span>点击或者拖拽文件到此处上传</span>
              </div>
            </div>
          </div>

          <!-- 论文 -->
          <div class="section paper">
            <div class="header">论文</div>
            <div class="item">
              <div class="title star">论文情况</div>
              <div class="itemContent text-area">
                请输入刊物名称、类别和获奖名次情况<br>
                （如：CCF A类英文期刊）并在下方上传证明图片
              </div>
            </div>
            <div class="item">
              <div class="title">图片证明</div>
              <div class="itemContent upload-area">
                <el-icon><Plus /></el-icon>
                <span>点击或者拖拽文件到此处上传</span>
              </div>
            </div>
          </div>

          <!-- 科研成果 -->
          <div class="section science">
            <div class="header">科研成果</div>
            <div class="item">
              <div class="title star">授权的发明专利情况</div>
              <div class="itemContent text-area">
                请输入名称和专利排名（除去指导教师的实际排名）
              </div>
            </div>
            <div class="item">
              <div class="title star">软件著作权情况</div>
              <div class="itemContent text-area">
                请输入名称和专利排名（除去指导教师的实际排名）若申请人非个人，请在上传教师提供的纸质证明
              </div>
            </div>
            <div class="item">
              <div class="title">纸质证明</div>
              <div class="itemContent upload-area">
                <el-icon><Plus /></el-icon>
                <span>点击或者拖拽文件到此处上传</span>
              </div>
            </div>
          </div>

          <!-- 违纪 -->
          <div class="section violation">
            <div class="header">违纪</div>
            <div class="item">
              <div class="title star">违纪情况</div>
              <div class="itemContent text-area">
                请输入本学年违纪情况
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
// 颜色变量
$primary-color: #4c5fbc;
$border-color: #cacacb;
$text-color: #333;
$text-secondary: #7f7f7f;
$text-placeholder: #afafaf;
$bg-color: #f2f3f5;
$bg-white: #ffffff;
$required-color: #ff4d4f;
$hover-bg: #e6f7ff;

// 尺寸变量
$border-radius: 8px;
$section-padding: 0 100px 50px;
$item-gap: 40px;
$shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

.TaskStudyDetail {
  width: 100%;
  height: 100%;
  font-weight: 500;
  color: $text-color;

  .topHeader {
    width: 100%;
    height: 10%;
    padding-left: 20px;
    display: flex;
    align-items: center;
    border-top: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
    background-color: $bg-white;
    font-size: 20px;
    box-shadow: $shadow;
  }

  .breadcrumb {
    width: 100%;
    height: 7.5vh;
    line-height: 7.5vh;
    padding-left: 40px;
    font-size: 17px;
    color: $text-secondary;
    background-color: $bg-white;
    span {
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        color: $primary-color;
        font-weight: 600;
      }
    }
  }

  .TaskPreviewStudy {
    width: 100%;
    height: calc(100% - 10% - 7.5vh);
    padding: 0 80px;

    .layout {
      width: 100%;
      height: 100%;
      padding-bottom: 20px;
      overflow: auto;

      &::-webkit-scrollbar {
        display: none;
      }

      .layoutHeader {
        width: 100%;
        padding: 40px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .title {
          font-size: 28px;
          font-weight: 600;
          margin-bottom: 15px;
          color: $text-color;
          
        }

        .time {
          font-size: 16px;
          font-family: monospace;
          color: $text-secondary;
        }
      }

      .layoutContent {
        width: 100%;

        // 通用区块样式
        .section {
          margin-top: 40px;
          width: 100%;
          padding: $section-padding;
          background-color: $bg-white;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: $item-gap;
          border-radius: $border-radius;
          box-shadow: $shadow;

          &:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          }

          .header {
            width: 100%;
            height: 50px;
            margin-top: 10px;
            line-height: 50px;
            font-size: 18px;
            font-weight: 600;
            color: $text-color;
            border-bottom: 2px solid $primary-color;
            padding-bottom: 5px;
          }

          .item {
            width: 100%;
            display: flex;
            gap: 20px;
            font-size: 15px;

            .title {
              width: 170px;
              text-align: right;
              font-size: 18px;
              color: $text-color;
              flex-shrink: 0;

              &.star::before {
                content: '*';
                color: $required-color;
                margin-right: 5px;
              }
            }

            .itemContent {
              flex: 1;
              min-width: 0;
              color: $text-placeholder;

              &.text-area {
                min-height: 110px;
                padding: 15px;
                border-radius: $border-radius;
                background-color: $bg-color;
                line-height: 1.6;
                border: 1px solid transparent;
                transition: all 0.3s ease;

                &:hover {
                  border-color: $primary-color;
                  background-color: $hover-bg;
                }
              }

              &.input-field {
                height: 40px;
                padding: 0 15px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-radius: $border-radius;
                background-color: $bg-color;
                border: 1px solid transparent;
                transition: all 0.3s ease;

                &:hover {
                  border-color: $primary-color;
                  background-color: $hover-bg;
                }
              }

              &.upload-area {
                min-height: 150px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 20px;
                padding: 20px;
                border-radius: $border-radius;
                background-color: $bg-color;
                border: 2px dashed #d9d9d9;
                cursor: pointer;
                transition: all 0.3s ease;

                &:hover {
                  border-color: $primary-color;
                  background-color: $hover-bg;
                  color: $primary-color;

                  .el-icon {
                    color: $primary-color;
                  }
                }

                .el-icon {
                  font-size: 24px;
                  transition: color 0.3s ease;
                }
              }
            }
          }
        }
        // 考试选项特殊样式
        .baseStudy {
            .item .itemContent {
                width: 100%;
                .content {
                height: 30px;
                display: flex;
                align-items: center;
                gap: 20px;
                margin-bottom: 10px;
                .circle {
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    background-color: $text-placeholder;
                    transition: all 0.3s ease;

                    &:hover {
                        background-color: $primary-color;
                        transform: scale(1.2);
                    }
                }

                .text {
                    color: $text-color;
                }
                }
            }
        }
      }
    }
  }
}
</style>